<template>
	<view>
		<view class="text-center text-40">{{formatTime(endtime)}}</view>
		<view class="text-24 text-center text-gray mt-20">最短3秒，最长60秒</view>
		<view class="flex items-center mt-20">
			<view @click="playRecordEvent" v-if="endStatus">
				<image style="width: 80rpx; height: 80rpx;" :src="`${$imageBaseUrl}jsfun-record/stop.png`" v-if="isPlaying"></image>
				<image style="width: 80rpx; height: 80rpx;" :src="`${$imageBaseUrl}jsfun-record/play.png`" v-else></image>
			</view>
			<view class="flex items-center justify-center round-100 mx-50" style="background-color: #0B9AFF; width: 140rpx; height: 140rpx;" @click="benginEvent">
				<view class="icons" v-if="recording">
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
				</view>
				<uni-icons type="mic-filled" v-else size="80rpx" class="flex items-center" color="#fff"></uni-icons>
			</view>
			<image style="width: 80rpx; height: 80rpx;" :src="`${$imageBaseUrl}jsfun-record/confirm.png`" v-if="endStatus" @click="confirmEvent"></image>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
	recordOptions: {
		type: Object,
		default() {
			return {
				duration: 600000
			}; // 请自行查看各端的的支持情况，这里全部使用默认配置
		}
	}
})

const emit = defineEmits(['confirm', 'end'])

const recorderManager = ref(uni.getRecorderManager())
const innerAudioContext = uni.createInnerAudioContext()
const recording = ref(false)
const current = ref(0)
const timer = ref()
const endStatus = ref(false)
const endtime = ref(0)
function benginEvent(){
	if (!permisionState.value) {
		checkPermission()
		return;
	}
	if(recording.value){
		endRecord()
	} else{
		recorderManager.value.start(props.recordOptions);
		recording.value = true
		timer.value = setInterval(() => {
			current.value = current.value + 1
			endtime.value = current.value + 1
			if(current.value === 60){
				endRecord()
				clearInterval(timer.value)
				current.value = 0
			}
		}, 1000)
	}
}

const permisionState = ref(false)
const recordData = ref({})

function checkPermission(){
	uni.authorize({
		scope: 'scope.record',
		success: (e) => {
			permisionState.value = true
			benginEvent()
		},
		fail: (err) => {
			console.log('调用录音权限错误', err)
			uni.navigateBack()
			uni.showToast({
				title: '禁止答题，请授权使用录音',
				icon: 'none'
			});
		}
	});
}
recorderManager.value.onStop((res) => {
	recordData.value = res
	emit('end', recordData.value)
})

function endRecord() {
	recorderManager.value.stop();
	clearInterval(timer.value)
	current.value = 0
	recording.value = false
	endStatus.value = true
}

function formatTime(num) {
	let hours = Math.floor(num / 60)
	let minutes = num % 60
	if (minutes === 60) {
		hours += 1
		minutes = 0
	}
	const formattedHours = String(hours).padStart(2, '0')
	const formattedMinutes = String(minutes).padStart(2, '0')
	return `${formattedHours}:${formattedMinutes}`
}

const isPlaying = ref(false)

innerAudioContext.onStop(() => {
	isPlaying.value = false
})
innerAudioContext.onEnded(() => {
	isPlaying.value = false
})
innerAudioContext.onPlay(() => {
	isPlaying.value = true
})
innerAudioContext.onError(err => {
	console.log('报错了', err)
	innerAudioContext.src = ''
})
function playRecordEvent(){
	if(isPlaying.value){
		innerAudioContext.stop()
	} else{
		innerAudioContext.autoplay = true
		innerAudioContext.src = recordData.value.tempFilePath
		innerAudioContext.play()
	}
}

function confirmEvent(){
	emit('confirm', recordData.value)
}
</script>

<style lang="scss" scoped>
.icons {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.icons .item {
  width: 5rpx;
  margin: 0 5rpx;
  height: 20rpx;
  background-color: #fff;
}

.icons .item:nth-of-type(1) {
  animation: grow 1s -0.45s ease-in-out infinite;
}

.icons .item:nth-of-type(2) {
  animation: grow 1s -0.3s ease-in-out infinite;
}

.icons .item:nth-of-type(3) {
  animation: grow 1s -0.15s ease-in-out infinite;
}

.icons .item:nth-of-type(4) {
  animation: grow 1s ease-in-out infinite;
}

@keyframes grow {
  0%,
  100% {
	transform: scaleY(1);
  }

  50% {
	transform: scaleY(2);
  }
}
</style>